<template>
  <view class="my-container">
    <view class="area">
      <view class="cell-column">
        <view class="cell-text">
          手机号码
        </view>
        <view class="cell-option">
          <input class="input" type="number" maxlength="11" v-model="phone" placeholder="请输入手机号码" />
        </view>
      </view>
      <view class="cell-column">
        <view class="cell-text">
          验证码
        </view>
        <view class="cell-option" style="display: flex;flex-direction: row;align-items: center;">
          <input class="input" type="number" v-model="code" placeholder="请输入" style="flex: 1;"/>
          <button class="text" :class="isSending ? 'text1' : ''" :disabled="isSending" @click="sendCode">{{ isSending ? countdown + 's' : btnText }}</button>
        </view>
      </view>
    </view>
    <view class="my-footer" :style="{bottom: GET_SAFEAREA_BOTTOM+'px'}" @click="submitFun">
      <text class="text">提交认证</text>
    </view>
  </view>
</template>

<script>
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  import requestPost, { requestGet, login } from '@/utils/request.js';
  import validateMobile from '@/utils/verification.js';
  export default{
    data() {
      return {
		userInfo: null,
        phone: '',
        code: '',
        btnText: '获取验证码',
        countdown: 60,
        isSending: false
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
    },
	onShow(){
	  this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
	  this.phone = this.userInfo.phonenumber
	},
    methods: {
      sendMessage(){
        uni.showLoading({title: '短信发送中'});
        requestPost("/user/checkPhoneUnique",{phone: this.phone}, '/system').then(check => {
          if(check.code === 200){
            requestGet('/wxAuth/sendMessage', {phone: this.phone}, '/baseplatform').then(res => {
              uni.hideLoading();
              if(res.code == 200){
                uni.showToast({title: '短信发送成功！', icon: 'none'});
              }else{
                uni.showToast({title: res.msg || '短信发送失败！', icon: 'none'});
              }
            }).catch(res => console.log('短信发送失败', res))
          }else{
            uni.hideLoading();
            uni.showToast({title: check.msg || '该手机号已被认证', icon: 'none'});
          }
        })
      },
      submitFun(){
        if(!this.phone || this.phone == "" ){
          uni.showToast({title: '请输入手机号码！', icon: 'none'});
          return
        }
        if(!this.code || this.code == ''){
          uni.showToast({title: '请输入验证码！', icon: 'none'});
          return
        }
        uni.showLoading({title: '数据核验中'});
        requestPost('/wxAuth/checkPhoneCode', {phone: this.phone, code: this.code}, '/baseplatform').then(res => {
          uni.hideLoading();
          if(res.code === 200){
            uni.showToast({title: '认证成功！'});
            login(true);
            // uni.navigateBack();
          }else{
            uni.showToast({title: res.msg || '认证失败！', icon: 'none'});
          }
        })
      },
      sendCode() {
        if(!validateMobile(this.phone)){
          uni.showToast({title: '请输入正确的手机号码！', icon: 'none'});
          return
        }
        // 发送验证码逻辑
        this.sendMessage();
        // 启动倒计时
        this.isSending = true;
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            this.isSending = false;
            this.btnText = "重新发送";
            this.countdown = 60;
            clearInterval(timer); // 清除计时器
          }
        }, 1000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-container {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #F5F7F6;
  }
  .area{
    width: calc(100% - 64rpx);
    background-color: #FFFFFF;
    margin-top: 16rpx;
    border-radius: 24rpx;
    margin: 16rpx 32rpx 32rpx 32rpx;
  }
  .cell-column{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    height: 104rpx;
    padding: 0 24rpx;
    .cell-text{
      width: 184rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.5);
      line-height: 104rpx;
    }
    .cell-option{
      position: relative;
      width: 100%;
      height: 100%;
      flex: 1;
      .input{
        height: 104rpx;
        line-height: 104rpx;
        font-size: 28rpx;
        padding-left: 32rpx;
        background: #FFFFFF;
        border-radius: 8rpx;
      }
      .text{
        height: 80rpx;
        background: #FFFFFF;
        font-size: 32rpx;
        font-weight: 400;
        color: #3FAA73;
        line-height: 80rpx;
      }
      button::after{
        border: none;
      }
      .text1{
        background: rgba(0,0,0,0.1);
        color: #FFFFFF;
      }
    }
  }
  .my-footer {
    position: fixed;
    bottom: 34rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 598rpx;
    height: 84rpx;
    background: #3FAA73;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    .text {
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32rpx;
    }
  }
</style>